import { Component } from 'react'
import "../assent/css/login.css"
import logo from "../assent/img/mine/lo.png"

// 登录接口
import { dologin } from "../request/app"

class Login extends Component {
    constructor() {
        super()
        // 定义数据
        this.state = {
            title: "登录",
            // 个人数据
            userinfo: {
                phone: "",
                password: ""
            }
        }
    }
    render() {
        // 解构数据
        let { phone, password } = this.state.userinfo
        return (
            <div id='logins'>
                <h1 className='mine'>登录</h1>
                <div className='bga'><img src={logo} /></div>
                <div className='log'>
                    <div className='zh'>
                        <input type="text" placeholder='请输入手机号' value={phone} onChange={this.change.bind(this, "phone")} />
                    </div>
                    <div className='zh'>
                        <input type="text" placeholder='请输入密码' value={password} onChange={this.change.bind(this, "password")} />
                    </div>
                    <div className='o'>
                        <a href="/register" className='click'>点击去注册</a>
                    </div>
                </div>
                <p className='login' onClick={this.login.bind(this)}>登录</p>
            </div>
        );
    }

    // 获取手机号与密码
    change(type, e) {
        this.setState({
            userinfo: {
                ...this.state.userinfo,
                [type]: e.target.value
            }
        })
    }

    // 执行登录
    login() {
        // 提交
        dologin(this.state.userinfo).then(res => {
            console.log(res);
            if (res.code != 200) {
                alert(res.msg)
                return
            }
            localStorage.setItem("userinfo", JSON.stringify(res.list))
            alert(res.msg)
            window.location.href="/home"
        })
    }
}
export default Login